<template>
  <view class="dispatch-page">
    <view class="search-box">
      <input v-model="payload.keyword" type="text" placeholder="请输入师傅姓名">
      <view class="search-btn" @click="loadRes">
        <image class="icon" src="/static/icon/search-icon.png"></image>
      </view>
    </view>
    <view class="list">
      <view v-for="(item, index) in data" :key="index" class="item" @click="form.master_id = item.id">
        <image class="avatar" src="/static/test/staff.png" mode="aspectFill"></image>
        <view class="infos">
          <view class="top">
            <view class="name">{{item.name}}</view>
            <view class="tag">
              <view class="dot"></view>
              <text>{{item.grade}}</text>
            </view>
            <!-- <image v-if="index < 2" class="tag" src="/subpages/static/high.png"></image>
            <image v-else class="tag" src="/subpages/static/normal.png"></image> -->
          </view>
          <view class="bot">
            <image class="icon" src="/subpages/static/phone-icon.png"></image>
            <text>{{item.phone}}</text>
          </view>
        </view>
        <image v-if="item.id === form.master_id" class="checked" src="/subpages/static/checked.png"></image>
        <view v-else class="uncheck"></view>
      </view>
      <empty v-if="data.length === 0" top="20vh" />
    </view>
    <button-fixed @submit="handleSubmit">确认派单</button-fixed>
  </view>
</template>

<script>
  import { MasterListApi, AssignOrdersApi } from '@/api/'
  const app = getApp()
  
  export default {
    data() {
      return {
        data: [],
        payload: {
          keyword: '',
        },
        form: {
          master_id: '',
          order_id: ''
        }
      };
    },
    methods: {
      loadRes() {
        MasterListApi(this.payload).then(res => {
          this.form.master_id = ''
          this.data = res?.data || []
        }).catch(() => {})
      },
      handleSubmit() {
        if (this.form.master_id === '') {
          uni.showToast({
            icon: 'none',
            title: '请选择要派单的师傅'
          })
          return
        }
        AssignOrdersApi(this.form).then(() => {
          uni.showToast({
            icon: 'success',
            title: '派单成功',
            success() {
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/task/task'
                })
              }, 1200)
            }
          })
        }).catch(() => {})
      }
    },
    onLoad(options) {
      this.form.order_id = options.id
      this.loadRes()
    }
  }
</script>

<style lang="scss">
.dispatch-page {
  overflow: hidden;
  .search-box {
    margin: 20rpx auto 0;
    width: 690rpx;
    height: 66rpx;
    background: #FFFFFF;
    border-radius: 33rpx;
    @include flex;
    input {
      flex: 1;
      overflow: hidden;
      height: 66rpx;
      line-height: 1.4;
      font-size: 24rpx;
      box-sizing: border-box;
      padding-left: 32rpx;
    }
    .search-btn {
      width: 100rpx;
      height: 66rpx;
      @include flex;
      .icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .list {
    overflow: hidden;
    .item {
      width: 690rpx;
      margin: 20rpx auto;
      height: 152rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 1rpx 8rpx 1rpx rgba(0,0,0,0.05);
      border-radius: 10rpx;
      @include flex;
      padding: 0 30rpx;
      box-sizing: border-box;
      .avatar {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 18rpx;
      }
      .infos {
        flex: 1;
        overflow: hidden;
        .top {
          @include flex(row,center,flex-start);
          margin-bottom: 16rpx;
          .name {
            font-size: 30rpx;
            color: #222222;
            margin-right: 12rpx;
          }
          .tag {
            height: 28rpx;
            @include flex;
            border: 2rpx solid #f2250f;
            border-left: 0;
            box-sizing: border-box;
            padding-right: 6rpx;
            position: relative;
            &::before {
              content: '';
              width: 0;
              height: 0;
              border-top: 14rpx solid transparent;
              border-bottom: 14rpx solid transparent;
              border-right: 10rpx solid #f2250f;
              position: absolute;
              top: -2rpx;
              right: 100%;
            }
            &::after {
              content: '';
              width: 0;
              height: 0;
              border-top: 12rpx solid transparent;
              border-bottom: 12rpx solid transparent;
              border-right: 8rpx solid #fff;
              position: absolute;
              top: 0;
              right: 100%;
            }
            .dot {
              width: 8rpx;
              height: 8rpx;
              background-color: #f2250f;
              border-radius: 50%;
              margin-right: 6rpx;
            }
            text {
              flex: 1;
              overflow: hidden;
              font-size: 20rpx;
              color: #f2250f;
            }
          }
        }
        .bot {
          font-size: 24rpx;
          color: #222222;
          .icon {
            width: 22rpx;
            height: 22rpx;
            margin-right: 5rpx;
          }
        }
      }
      .uncheck {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        border: 1px solid #666666;
        box-sizing: border-box;
      }
      .checked {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>
